<template>
  <!-- loading -->
  <div class="loading">
    <!-- 加载中... -->
    <div class="loader" v-if="loading === 0" />
    <div v-if="loading === 2">⛔</div>
    <div>{{ message }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import WebContainerAPI from "../../class/WebContainerAPI";

const loading = ref(0);
const emit = defineEmits(["success"]);
const message = ref("Web Container Booting...");

/**
 * Web Container Loading 状态
 *  0 加载中
 *  1 加载完成 ✅ 加载完成后，直接 emit success 事件
 *  2 加载失败
 */
WebContainerAPI.initWebContainer()
  .then(() => emit("success"))
  .catch((error) => {
    loading.value = 2;
    message.value = error;
  });
</script>
